<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Tag Management</title>
</head>

<body>
    <h1>Tag Management</h1>

    <!-- 新建标签表单 -->
    <form id="newTagForm">
        <input type="text" id="tagName" placeholder="Enter tag name" required>
        <button type="submit">Create Tag</button>
    </form>

    <!-- 标签列表 -->
    <ul id="tagList"></ul>

    <script>
        document.getElementById('newTagForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const tagName = document.getElementById('tagName').value;
            const response = await fetch('/mps/tags', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ name: tagName }),
            });
            const result = await response.json();
            if (response.ok) {
                document.getElementById('tagName').value = '';
                fetchTags();
            } else {
                alert(result.message);
            }
        });

        async function fetchTags() {
            const response = await fetch('/mps/tags');
            if (response.ok) {
                const tags = await response.json();
                const tagList = document.getElementById('tagList');
                tagList.innerHTML = '';
                tags.forEach(tag => {
                    const li = document.createElement('li');
                    li.textContent = tag.name;
                    li.id = tag._id; // 假设每个标签都有一个唯一的_id字段

                    // 添加编辑按钮
                    const editButton = document.createElement('button');
                    editButton.textContent = 'Edit';
                    editButton.addEventListener('click', function () {
                        // 编辑标签的逻辑
                        editTag(tag._id);
                    });

                    // 添加删除按钮
                    const deleteButton = document.createElement('button');
                    deleteButton.textContent = 'Delete';
                    deleteButton.addEventListener('click', async function () {
                        // 删除标签的逻辑
                        await deleteTag(tag._id);
                        fetchTags(); // 刷新标签列表
                    });

                    li.appendChild(editButton);
                    li.appendChild(deleteButton);
                    tagList.appendChild(li);
                });
            } else {
                // Handle error
            }
        }

        // 编辑标签的函数
        async function editTag(tagId) {
            const newName = prompt('Enter new tag name:', ''); // 简单示例，使用浏览器的prompt
            if (newName) {
                const response = await fetch(`/mps/tags/${tagId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ name: newName }),
                });
                if (response.ok) {
                    fetchTags(); // 更新标签列表
                } else {
                    alert(await response.json().message);
                }
            }
        }

        // 删除标签的函数
        async function deleteTag(tagId) {
            const response = await fetch(`/mps/tags/${tagId}`, {
                method: 'DELETE',
            });
            if (!response.ok) {
                alert(await response.json().message);
            }
        }

        // Fetch tags on page load
        fetchTags();
    </script>
</body>

</html>